import { View, Text, Image } from 'react-native';
import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import HomeScreen from './tabs/HomeScreen';
import CategoryScreen from './tabs/CategoryScreen';
import StudyScreen from './tabs/StudyScreen';
import MyScreen from './tabs/MyScreen';

const Tab = createBottomTabNavigator();

const Index = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen
        name="首页"
        component={HomeScreen}
        options={{
          tabBarIcon: ({ focused}) => {
            let icon = focused ? require("../static/tabbar/homeActive.png") : require("../static/tabbar/home.png");
            return (
              <Image
                style={{
                  width: 24,
                  height: 24,
                }}
                source={icon}
              />
            );
          },
        }}
      />
      <Tab.Screen
        name="分类"
        component={CategoryScreen}
        options={{
          tabBarIcon: ({focused}) => {
            let icon = focused ? require("../static/tabbar/homeActive.png") : require("../static/tabbar/home.png");
            return (
              <Image
                style={{
                  width: 24,
                  height: 24,
                }}
                source={{
                  uri: 'https://reactnative.dev/img/tiny_logo.png',
                }}
              />
            );
          },
        }}
      />
      <Tab.Screen
        name="学习"
        component={StudyScreen}
        options={{
          tabBarIcon: () => {
            return (
              <Image
                style={{
                  width: 24,
                  height: 24,
                }}
                source={{
                  uri: 'https://reactnative.dev/img/tiny_logo.png',
                }}
              />
            );
          },
        }}
      />
      <Tab.Screen
        name="我的"
        component={MyScreen}
        options={{
          tabBarIcon: () => {
            return (
              <Image
                style={{
                  width: 24,
                  height: 24,
                }}
                source={{
                  uri: 'https://reactnative.dev/img/tiny_logo.png',
                }}
              />
            );
          },
        }}
      />
    </Tab.Navigator>
  );
};

export default Index;
